/* @font-face{    此处只是引入字体 后面要用这个字体 就需要加上font-family:"Raphaelicons";
	font-family:"R aphaelincons";
	src:url('../fonts/raphaelicons-webfont.eot') format('eot'),
		url('../fonts/raphaelicons-webfont.ttf') format('truetype'),
		url('../fonts/raphaelicons-webfont.woff') format('woff'),
		url('../fonts/raphaelicons-webfont.svg') format('svg');
	font-family:normal;
	font-style:normal;
} */

@font-face{    /*  此处只是引入字体 后面要用这个字体 就需要加上font-family:"Raphaelicons";  */
	font-family:"Raphaelincons";
	src:url('../fonts/raphaelicons-webfont.woff.ttf') format('truetype');
	font-family:normal;
	font-style:normal;
}

body{font-family:Georgia,serif;background:#ddd;font-weight:400;font-size:14px;color:#333;overflow:hidden;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:#555;}
.clr{width:0px;height:0px;overflow:hidden;clear:both;padding:0px;margin:0px;}
.st-container{width:100%;height:100%;position:absolute;left:0;top:0;font-family:"Myriad Pro",Arial,sans-serif;}
.st-container > input,.st-container > a{width:20%;height:35px;line-height:35px;position:fixed;bottom:0px;}
.st-container > input{opacity:0;/*隐藏标签 建议用这种隐藏*/z-index:8;cursor:pointer;}
.st-container > a{z-index:6;text-align:center;font-size:16px;background:#e23a6e;font-weight:700px;color:#fff;text-decoration:1px 1px 1px rgba(151,24,64,0.2);/* 文字阴影  */}
#st-control-1,#st-control-1 + a{left:0%;}
#st-control-2,#st-control-2 + a{left:20%;}
#st-control-3,#st-control-3 + a{left:40%;}
#st-control-4,#st-control-4 + a{left:60%;}
#st-control-5,#st-control-5 + a{left:80%;}
.st-container > input:checked + a{background:#821134;}
.st-container > input:checked:hover + a{background:#821134;} /*  此处设置的为滑动在选中的input上面 a标签的背景的颜色与已选中时的背景色一致  */
.st-container > input:hover + a{background:#AD244F;} /* 鼠标划过的背景  注：此处的input在上层，a在下层  */ 
.st-container > input:checked + a:after{content:"";width:0px;height:0px;overflow:hidden;border:20px solid transparent;border-bottom-color:#821134;position:absolute;bottom:100%;left:50%;margin-left:-20px;}/* 这个三角形是在input选中 a标签后 动态生成的  */

/*  内容区  */
.st-scroll,.st-panel{width:100%;height:100%;position:relative;}
.st-scroll{
	left:0px;top:0px;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;/*当前元素不面向屏幕时隐藏*/ 
	-webkit-transition:all 0.6s ease-in-out;/* translate定义在哪个盒子上就在哪个盒子上设置过渡；所有滚动的盒子位置过渡为0.6秒 动画曲线是由慢到快再到慢过程*/
	-moz-transition:all 0.6s ease-in-out;
	-o-transition:all 0.6s ease-in-out;
	-ms-transition:all 0.6s ease-in-out;
}


.st-panel{background:#fff;overflow:hidden;}
#st-control-1:checked ~ .st-scroll{-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-o-transform:translateY(0%);-ms-transform:translateY(0%);}
#st-control-2:checked ~ .st-scroll{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-ms-transform:translateY(-100%);}
#st-control-3:checked ~ .st-scroll{-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-o-transform:translateY(-200%);-ms-transform:translateY(-200%);}
#st-control-4:checked ~ .st-scroll{-webkit-transform:translateY(-300%);-moz-transform:translateY(-300%);-o-transform:translateY(-300%);-ms-transform:translateY(-300%);}
#st-control-5:checked ~ .st-scroll{-webkit-transform:translateY(-400%);-moz-transform:translateY(-400%);-o-transform:translateY(-400%);-ms-transform:translateY(-400%);}

.st-desc{
	width:200px;
	height:200px;
	background:#fa96b5;
	position:absolute;
	left:50%;
	top:0px;
	margin-left:-100px;
	-webkit-transform:translateY(-50%) rotate(45deg);/* 通过设置正方形，对其进行Y向向上移动和旋转让其显示为三角形 */
	-moz-transform:translateY(-50%) rotate(45deg);
	-o-transform:translateY(-50%) rotate(45deg);
	-ms-transform:translateY(-50%) rotate(45deg);
}

[data-icon]:after{
	content:attr(data-icon);/* 获取属性值做为其本身盒子的内容增加在后面 */
	width:200px;
	height:200px;
	line-height:200px;
	text-align:center;
	color:#fff;
	font-size:90px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-100px 0px 0px -100px;
	-webkit-transform:rotate(-45deg) translateY(25%); /* 此处属性值注意前后顺序，前一步(类名为st-desc的盒子)是先移动再旋转，此处则是先旋转再移动 */
	-moz-transform:rotate(-45deg) translateY(25%);
	-o-transform:rotate(-45deg) translateY(25%);
	-ms-transform:rotate(-45deg) translateY(25%);
	font-family:"Raphaelicons";
	text-decoration:1px 1px 1px rgba(151,24,64,0.2);
}

.st-panel h2{
	color:#e23a6e;
	font-size:54px;
	line-height:50px;
	text-align:center;
	font-weight:900;
	width:80%;
	position:absolute;
	left:10%;
	top:50%;
	margin-top:-70px;
	text-shadow:1px 1px 1px rgba(151,24,64,0.2);
	-webkit-backface-visibility:hidden;

}

#st-control-1:checked ~ .st-scroll  #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll  #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll  #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll  #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll  #st-panel-5 h2{
	-webkit-animation:moveDown 1s ease-in-out 0.2s backwards; /*  backwards 意思是在0.2s的延时内，动画播放之前，让动画处于开始状态  */
	-moz-animation:moveDown 1s ease-in-out 0.2s backwards;
	-o-animation:moveDown 1s ease-in-out 0.2s backwards;
	-ms-animation:moveDown 1s ease-in-out 0.2s backwards;
	animation:moveDown 1s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveDown{   /*  此处可以定义若干个帧  也可以从头开始用from或者to  考虑到兼容性要写多个兼容*/
	0%{
		-webkit-transform:translateY(-40px);
		opacity:0; /* 此处设置透明度为了让文字动画实现的时候不是那么生硬 */
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-moz-keyframes moveDown{
	0%{
		-webkit-transform:translateY(-40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-o-keyframes moveDown{
	0%{
		-webkit-transform:translateY(-40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-ms-keyframes moveDown{
	0%{
		-webkit-transform:translateY(-40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

.st-panel p{
	position:absolute;
	width:50%;
	left:25%;
	top:50%;
	padding-top:-300;
	font-size:16px;
	line-height:22px;
	padding:0px;
	text-align:center;
	-webkit-backface-visibility:hidden;
	color:#8b8b8b;
	margin-top:10px;

}

#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
	-webkit-animation:moveUp 1s ease-in-out 0.2s backwards;
	-moz-animation:moveUp 1s ease-in-out 0.2s backwards;
	-o-animation:moveUp 1s ease-in-out 0.2s backwards;
	-ms-animation:moveUp 1s ease-in-out 0.2s backwards;
	animation:moveUp 1s ease-in-out 0.2s backwards;
}


@-webkit-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-moz-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-o-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-ms-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

.st-color{background:#fa96b5;}
.st-color .st-desc{background:#fff;}

.st-color [data-icon]:after{
	color:#fa96b5;
}

.st-color h2{
	color:#fff;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}

.st-color p{
	color:rgba(255,255,255,0.8);
}

@media screen and (max-width:520px){
	.st-panel h2{
		font-size:42px;
	}

	.st-panel p{
		width:90%;
		left:10%;
		margin-top:0px;
	}

	.st-container > a{
		font-size:12px;
	}
}

@media screen and (max-width:360px){
	.st-panel h2{
		font-size:42px;
	}

	.st-panel p{
		width:90%;
		left:10%;
		margin-top:0px;
	}

	.st-container > a{
		font-size:10px;
	}
	.st-desc{
		width:120px;
		height:120px;
		margin-left:-60px;
	}
}